@mixin triangle($size:100px,$color:'red',$direction:'left'){
	width: 0px;
	height: 0px;
	border-width: $size;
	@if $direction == 'left'{
		border-color: transparent transparent transparent $color;
	}
	@if $direction == 'right'{
		border-color: transparent $color transparent transparent;
	}
	@if $direction == 'top'{
		border-color: $color transparent transparent transparent;
	}
	@if $direction == 'bottom'{
		border-color: transparent transparent $color transparent;
	}
	border-style: solid;
	display: inline-block;
}

@for $i from 1 through 4{
	$color:red;
	$direction:left;
	@if $i == 1 {
		$color:blue;
		$direction:top;
	}
	@if $i == 2 {
		$color:red;
		$direction:bottom;
	}
	@if $i == 3 {
		$color:green;
		$direction:left;
	}
	@if $i == 4 {
		$color:black;
		$direction:right;
	}
	.div#{$i} {
		@include triangle(100px, $color, $direction)
	}
}

// .div {
// 	@include triangle;
// }
// .triangle2 {
// 	@include Atriangle($border-top:'100px solid red',$transform:rotate(260deg));
// }
// .triangle3 {
// 	@include Atriangle($border-top:'100px solid blue',$transform:rotate(360deg));
// }
// .triangle4 {
// 	@include Atriangle($border-top:'100px solid green',$transform:rotate(90deg));
// }
